<template>
  <div ref="lineChart" class="echarts"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue-demi'
let myEchart = null
const lineChart = ref(null)
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
})
const option = ref({
  color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  toolbox: {
    show: true
  },
  legend: {
    type: 'scroll',
    orient: 'vertical',
    align: 'right',
    top: 'middle',
    //靠右
    right: "5%",
    textStyle: {
      color: '#8C8C8C'
    },
    height: 150
  },
  series: [
    {
      name: '数量',
      type: 'pie',
      radius: [0, 80],
      //位置
      center: ['30%', '50%'],
      label: {
            show: true,
            //展示在内部
            position: 'inner',
            //白色
            color: '#fff',
            //展示具体数字,不是百分比
            formatter: '{c}',
        },

      data: []
    }
  ]
})

onMounted(() => {
  initPage()
})

//监听props.data的变化
watch(
  () => props.data,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      initPage()
    }
  },
  {
    deep: true
  }
)

const initPage = () => {

   option.value.series[0].data = props.data

  myEchart = echarts.init(lineChart.value)
  myEchart.setOption(option.value)

  window.addEventListener('resize', () => {
    myEchart.resize()
  })
}

onUnmounted(() => {
  echarts.dispose(myEchart)
  window.removeEventListener('resize', () => {
    myEchart.resize()
  })
})
</script>

<style scoped lang="scss">
.echarts {
  width: 100%;
  height: 240px;
}
</style>
